<template>
  <view class="article-block-container" hover-class="article-block-container-hover" :hover-start-time="40"
    :hover-stay-time="260" @click="handleJumpDetails">
    <!-- 文章头信息 -->
    <view class="user-message" v-if="!userShow">
      <view class="user-message-images">
        <image lazy-load :src='data.user.avatar' class="avatar">
        </image>
        <view>
          <text class="username">{{data.user.userName}}</text>
          <text class="release-time">{{data.article.createTime | formatDate('yyyy年MM月dd日 hh:mm')}} 发布</text>
        </view>
      </view>
      <text class="read">
        {{data.article.viewsNum | filterNumber}} 阅读
      </text>
    </view>
    <!-- 文章内容 -->
    <view>
      <view class="headline" :style="{'margin-top': userShow ? '32rpx' : '0'}">
        <text>
          {{data.article.title}}
        </text>
        <view class="privacy-box" v-if="userShow">
          <view class="setting" @click.stop="upEditArticle">
            <view class="privacy" v-show="data.privateState == 1">私密</view>
            <view class="private" v-show="data.privateState == 0">公开</view>
            <view class="more">
              <!-- <image src="/static/more.png"></image> -->
              <uni-icons color='#cfcfcf' custom-prefix="iconfont" type="icon-menu" :size="16">
              </uni-icons>
            </view>
          </view>
          <view v-if="editStatus">
            <view class="popup-mask" @click.stop="editStatus=false"></view>
            <view class="popup">
              <view class="privacys" style="border: 0;" @click.stop="setPrivacy">
                设为{{data.privateState == 1 ? '公开' : '私密'}}</view>
              <view class="privacys" @click.stop="deleteArticle">删除文章</view>
            </view>
          </view>
        </view>
      </view>
      <view class="content">
        <text>{{data.article.content}}</text>
      </view>
    </view>
    <!-- 文章图片 -->
    <view class="images-container" v-if="images.length>0">
      <!-- 单图 -->
      <block v-if="images.length==1">
        <view class="single-images">
          <!-- <view class="image"> -->
            <!-- <change-image lazy-load :src="images[0]" mode="aspectFill" @click.stop="handlePreviewImage(0)" /> -->
            <image lazy-load :src="images[0]" mode="aspectFill" @click.stop="handlePreviewImage(0)" />
          <!-- </view> -->
          <!-- <image  /> -->
        </view>
      </block>
      <!-- 多图 -->
      <block v-else>
        <view class="multiple-images">
          <!-- 最多展示9张图 -->
          <image lazy-load :src="img" v-for="(img,index) in images.slice(0,9)" :key="img" mode="aspectFill"
            @click.stop="handlePreviewImage(index)" />
       <!--   <view class="image" v-for="(img,index) in images.slice(0,9)" :key="img">
            <change-image lazy-load :src="img" mode="aspectFill" @click.stop="handlePreviewImage(0)" />
          </view> -->
          <!-- 在图片数量为2 5 8 的时候添加 view 满足flex 布局 -->
          <view class="img-container" v-if="[2,5,8].includes(images.length)"></view>
        </view>
      </block>
    </view>
    <!-- 文章拓展信息 -->
    <view class="user-flow" :style="{'justify-content':userShow ? 'space-between' : 'flex-end'}">
      <view class="reading-quantity" v-if="userShow">
        <text>{{data.article.createTime | filterDate( 'yyyy年MM月dd日')}} 发布</text>
        <text>{{data.article.viewsNum}}阅读</text>
      </view>
      <view class="transmit-message">
        <view class="content">
          <!-- 转发 -->
          <view class="share-btn-container" hover-stop-propagation>
            <button class="share-container" open-type="share" type="primary" @click.stop="shareButton">
              <view class="btn-container">
                <uni-icons class="icon" custom-prefix="iconfont" type="icon-forward" color="#a2a2a2">
                </uni-icons>
                <text>{{data.article.shareNum}}</text>
              </view>
            </button>
          </view>
          <!-- 信息 -->
          <view class="btn-container">
            <uni-icons class="icon" custom-prefix="iconfont" type="icon-comment" color="#a2a2a2">
            </uni-icons>
            <text>{{data.article.commentNum}}</text>
          </view>
          <!-- 点赞数 -->
          <view class="btn-container">
            <uni-icons class="icon" custom-prefix="iconfont" type="icon-like" color="#a2a2a2">
            </uni-icons>
            <text>{{data.article.likeNum}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "article-block",
    props: {
      data: {
        type: Object,
        default: () => {
          return null;
        }
      },
      // 是否是当前文章用户
      userShow: {
        type: Boolean,
        default: false,
      },
      not2User: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        editStatus: false, //公开私密状态
      };
    },
    computed: {
      // 图片列表
      images() {
        let imageLink = this.data.image && this.data.image.imageLink ? this.data.image.imageLink : '';
        return imageLink.split(';').filter((item) => item);
      },
    },
    methods: {
      upEditArticle() {
        this.editStatus = !this.editStatus
      },
      // 预览图片
      handlePreviewImage(index) {
        uni.previewImage({
          urls: this.images,
          current: index,
        })
      },
      shareButton() {
        this.$emit('share', {
          title: this.data.title,
          path: `/pages/community/article-details/article-details?id=${this.data.articleId}`,
          imageUrl: `${this.images[0]?this.images[0]:'/static/logo/logo.png'}`,
          articleId: this.data.articleId
        })
      },
      // 跳转到详情页
      handleJumpDetails() {
        uni.navigateTo({
          url: `/pages/community/article-details/article-details?id=` + this.data.articleId + '&not2User=' + this
            .not2User
        })
      },
      setPrivacy() {
        this.editStatus = false
        this.$emit('giveSetPrivacy', this.data.articleId, this.data.privateState)
      },
      deleteArticle() {
        this.editStatus = false
        this.$emit('giveDeleteArticle', this.data.articleId)
      },
    },
    filters: {
      // 过滤方法 时间戳显示年月日
      filterDate(value) {
        let date = new Date(parseInt(value));
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d
      },
      filterNumber(value) {
        let val = Number(value)
        if (val >= 10000) {
          return (val / 10000).toFixed(1) + 'W'
        } else {
          return val
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article-block-container-hover {
    background-color: #f3f3f3 !important;
  }

  .article-block-container {
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    border-radius: 16rpx;
    position: relative;
    background-color: #fff;

    // 用户信息
    .user-message {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .user-message-images {
        display: flex;
        align-items: center;
        width: 500rpx;

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 100%;
          flex-shrink: 0;
        }

        >view {
          width: calc(100% - 40rpx);
          display: flex;
          flex-direction: column;
          padding-left: 16rpx;
          box-sizing: border-box;

          .username {
            width: 100%;
            font-family: '思源黑体';
            font-size: 16px;
            font-weight: 500;
            letter-spacing: 0px;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #333333;
          }

          .release-time {
            font-size: 24rpx;
            font-weight: normal;
            color: #545454;
          }
        }

        .read {
          font-size: 20rpx;
          font-weight: normal;
          line-height: 20rpx;
          letter-spacing: 0px;
        }
      }

      .read {
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(122, 122, 122, 0.5);
        height: 16rpx;
        border: solid 1px #ccc;
        padding: 10rpx;
        border-radius: 16px;
        max-width: 200rpx;
        text-align: center;
        line-height: 16rpx;
        color: #CCCCCC;
        letter-spacing: 1px;
      }
    }

    .headline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      white-space: nowrap;
      width: calc(100% - 200rpx);

      text {
        font-family: '思源黑体';
        font-size: 32rpx;
        font-weight: bold;
        letter-spacing: 1px;
        width: 100%;
        // 一行省略
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .privacy-box {
        position: absolute;
        right: 0;
        top: 0;

        .setting {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: absolute;
          right: 0;
          top: 0;
          padding: 32rpx;
          box-sizing: border-box;

          .privacy {
            width: 76rpx;
            height: 36rpx;
            text-align: center;
            line-height: 36rpx;
            border: solid 1px #F75454;
            color: #F75454;
            font-weight: 400;
            font-size: 24rpx;
            border-radius: 8rpx;
          }

          .private {
            width: 76rpx;
            height: 36rpx;
            text-align: center;
            line-height: 36rpx;
            border: solid 1px #3FD3D1;
            color: #3FD3D1;
            font-weight: 400;
            font-size: 24rpx;
            border-radius: 8rpx;
          }

          .more {
            width: 30rpx;
            height: 40rpx;
            padding: 0 10rpx;
            display: flex;
            justify-content: flex-end;

            image {
              width: 8rpx;
              height: 100%;
            }
          }
        }

        .popup-mask {
          position: fixed;
          width: 100vw;
          height: 100vh;
          top: 0;
          left: 0;
          z-index: 999;
        }

        .popup {
          width: 240rpx;
          height: 176rpx;
          background: #fff;
          position: absolute;
          top: 100rpx;
          right: 30rpx;
          padding: 10rpx;
          box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
          z-index: 999;
          border-radius: 10rpx;

          ::before {
            position: absolute;
            top: -5px;
            right: 20px;
            content: '';
            width: 10px;
            height: 10px;
            background: #fff;
            transform: rotate(135deg);
            box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
          }

          ::after {
            position: absolute;
            top: 0px;
            right: 15px;
            content: '';
            width: 20px;
            height: 20px;
            background: #fff;
          }

          .privacys {
            width: 90%;
            height: 88rpx;
            line-height: 50%;
            color: #545454;
            font-size: 24rpx;
            box-sizing: border-box;
            padding-left: 32rpx;
            padding-top: 32rpx;
            border-top: 1px solid #EEF2F4;
          }
        }

      }

    }

    .content {
      text {
        // 三行省略
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 3;
      }
    }

    .images-container {
      padding-top: 24rpx;
      width: 100%;

      // 单图
      .single-images {
        width: 100%;

        image {
          width: 100%;
          height: 400rpx;
          max-height: 600rpx;
          border-radius: 10rpx;
          background-color: #e8ebed;
        }
      }

      // 多图
      .multiple-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 648rpx;

        image {
          width: calc((100% - 48rpx) / 3);
          height: 200rpx;
          border-radius: 10rpx;
          margin-bottom: 24rpx;
          background-color: #e8ebed;
        }

        .img-container {
          width: 200rpx;
          height: 200rpx;
          margin-bottom: 24rpx;
        }

      }
    }

    .user-flow {
      width: 100%;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32rpx;

      .reading-quantity {
        display: flex;
        align-items: center;

        text:nth-of-type(2) {
          margin-left: 32rpx;
        }

        text {
          font-size: 24rpx;
          color: rgba(122, 122, 122, 0.5);
          font-weight: normal;
        }
      }

      .transmit-message {
        width: 300rpx;
        height: 100%;
        position: relative;

        .content {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          left: 0;
          top: 0;

          .btn-container {
            width: 100rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            position: relative;
            justify-content: center;

            .icon {
              margin-right: 8rpx;
            }

            text {
              color: #7A7A7A;
              font-size: 24rpx;
            }
          }

          .share-btn-container {

            // 去除button的样式
            .share-container {
              background-color: transparent;
              color: #7A7A7A;
              padding: 0;
              margin: 0;
            }

            .share-container::after {
              outline: none;
              border: none;
            }
          }

        }

      }
    }
  }
</style>